<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script>
        layui.use(['layer', 'jquery', 'table', 'form'], function () {
                let layer = layui.layer;//定义组件
                let $ = layui.jquery;//定义组件
                let table = layui.table;//定义表格组件
                let form = layui.form;//定义表单组件
                table.render({
                    elem: '#dg',
                    url: '../role/selectAll',
                    page: true,//开启分页
                    cols: [[ //表头
                        {field: 'roleId', title: '角色ID', type: 'checkbox'}
                        , {field: 'userId', title: '用户ID'}
                        , {field: 'roleName', title: '角色名'}
                        , {field: 'password', title: '密码'}
                        , {field: 'perms', title: '权限', style: "color:red;"}
                    ]]

                })
                //条件查询
                $("#btn-search").click(function () {
                    table.reload('dg', {
                        where: {
                            roleName: $("#roleName").val()
                        }
                    })
                })
                //修改权限
                $("#btn-edit").click(function () {
                    let array = table.checkStatus('dg').data;
                    if (array.length == 0) {
                        layer.msg('请选择要修改的数据');
                    } else if (array.length > 1) {
                        layer.msg('只能选择一条记录进行修改')
                    } else {
                        //弹出修改对话框
                        layer.open({
                            title: '修改用户权限',
                            type: 1,
                            content: $("#ae").html(),
                            area: ['600px']
                        })
                        //填充修改表单
                        form.val('load-edit-form-data', {
                            roleId: array[0].roleId,
                            userId: array[0].userId,
                            roleName: array[0].roleName,
                            password: array[0].password,
                            perms: array[0].perms
                        })

                        form.render();//重新渲染表单组件，组件就可以显示页面中
                        //在此编写ajax代码，请求后端进行修改操作
                        form.on('submit(edit-form-submit)', function (data) {
                            console.log(data.field);
                            $.post('../role/update', data.field, function (flag) {
                                if (flag) {
                                    layer.msg('修改成功', {icon: 6});
                                    layer.closeAll('page');
                                    table.reload('dg');
                                } else {
                                    layer.msg('修改失败', {icon: 5});
                                }
                            })
                            return false;//阻住提交表单标签action属性值
                        })
                    }
                })
//删除用户信息
                $("#btn-remove").click(function () {
                    let array = table.checkStatus('dg').data;
                    if (array.length == 0) {
                        layer.msg('请选择要删除的数据', {icon: 5});
                    } else {
                        let bids = [];//空数组
                        for (let i in array) {
                            bids.push(array[i].roleId);
                        }
                        $.post('../role/delete', {"bids[]": bids}, function (flag) {
                            if (flag) {
                                layer.msg('操作成功');
                                table.reload('dg');//刷新表格
                            } else {
                                layer.msg('操作成失败');
                            }
                        })

                    }
                })


            }
        )
    </script>
    <script id="ae" type="text/html">
        <form class="layui-form" id="editform" lay-filter="load-edit-form-data">
            <div class="layui-form-item">
                <input type="text" name="roleId" required lay-verify="required"
                       placeholder="请输入权限ID" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="userId" required lay-verify="required"
                       placeholder="请输入用户ID" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="roleName" required lay-verify="required"
                       placeholder="请输入用户名" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="text" name="password" required lay-verify="required"
                       placeholder="请输入用户密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <select name="perms">
                    <option value="admin">admin</option>
                    <option value="assist">assist</option>
                    <option value="student">student</option>
                    <option value="teacher">teacher</option>
                </select>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="edit-form-submit">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>

    </script>

</head>
<body>
<div>
    <div class="layui-inline">
        <input class="layui-input" id="roleName" placeholder="请输入用户名" style="width: 100px">
    </div>
    <button id="btn-search" class="layui-btn"><i class="layui-icon">&#xe615;</i>查询用户</button>
    <button id="btn-remove" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除用户</button>
    <button class="layui-btn layui-btn-warm" id="btn-edit"><i class="layui-icon">&#xe642;</i>授权</button>
</div>
<div>
    <table id="dg"></table>
</div>
</body>
</html>